<template>
  <div class="message-demo">
    <h2>Element Plus 消息提示演示</h2>
    <div class="button-group">
      <el-button :plain="true" @click="openSuccess">成功消息</el-button>
      <el-button :plain="true" @click="openWarning">警告消息</el-button>
      <el-button :plain="true" @click="openError">错误消息</el-button>
      <el-button :plain="true" @click="openInfo">信息消息</el-button>
      <el-button :plain="true" @click="openPrimary">主要消息</el-button>
    </div>
    
    <div class="usage-example">
      <h3>使用示例：</h3>
      <pre><code>
// 在组件中使用
import { showSuccess, showError } from '@/utils/message'

// 显示成功消息
showSuccess('操作成功！')

// 显示错误消息
showError('操作失败，请重试')

// 自定义显示时间（毫秒）
showWarning('警告信息', 5000)
      </code></pre>
    </div>
  </div>
</template>

<script setup>
import { showSuccess, showWarning, showError, showInfo, showPrimary } from '@/utils/message'

const openSuccess = () => {
  showSuccess('恭喜，操作成功！')
}

const openWarning = () => {
  showWarning('警告，请注意这个操作！')
}

const openError = () => {
  showError('错误，操作失败！')
}

const openInfo = () => {
  showInfo('这是一条信息提示')
}

const openPrimary = () => {
  showPrimary('这是一条主要消息')
}
</script>

<style scoped>
.message-demo {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.button-group {
  margin: 20px 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.usage-example {
  margin-top: 30px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.usage-example h3 {
  margin-top: 0;
  color: #333;
}

pre {
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
}

code {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
}
</style> 